<template>
  <div class="main">
    <govheader
      title="化工产业大脑 · 产业总览"
      @zfNameflagChange="zfNameflagChange"
    ></govheader>
    <govnavigation></govnavigation>
    <el-row
      class="content"
      style="margin: 0; position: relative"
      :gutter="20"
      v-if="zfNameflag"
    >
      <el-col :span="9" class="content-left">
        <el-col class="box">
          <div class="title">
            <p>全省化工产业整体情况</p>
          </div>
          <div class="content-body" style="margin-top: 3px">
            <div class="content-body-left">
              <div class="content-body-left-box">
                <div class="content-body-left-bottom content-body-left_bottom">
                  <p>{{ industryEntQty }}</p>
                </div>
                <div class="content-body-left-top">化工企业总数</div>
              </div>
              <div class="content-body-left-box">
                <div class="content-body-left-bottom content-body-left_bottom">
                  <p>{{ industryGsEntQty }}</p>
                </div>

                <div class="content-body-left-top">规上企业总数</div>
              </div>
              <div class="content-body-left-box">
                <div class="content-body-left-bottom content-body-left_bottom">
                  <p>{{ industryMainIncome }}</p>
                </div>

                <div class="content-body-left-top">
                  上年度营收
                  <span style="font-size: 12px; font-weight: 300">(亿元)</span>
                </div>
              </div>
              <div class="content-body-left-box">
                <div class="content-body-left-bottom content-body-left_bottom">
                  <p>{{ industryActualTax }}</p>
                </div>

                <div class="content-body-left-top">
                  税收
                  <span style="font-size: 12px; font-weight: 300">(亿元)</span>
                </div>
              </div>
            </div>
            <div class="content-body-right">
              <div id="revenue" style="width: 100%; height: 190px"></div>
            </div>
          </div>
        </el-col>
        <el-col class="box">
          <div class="box4 fl w50">
            <div class="title">
              <p>化工园区整体情况</p>
            </div>
            <div class="content-body" style="margin: 10px auto">
              <div class="content-body_left" style="margin-top: 0">
                <div
                  class="content-body-left-box content-body-left_box"
                  style="margin: 0 auto"
                >
                  <div class="content-body-left-top content-body_left_top">
                    入园化工企业数
                  </div>
                  <div
                    class="content-body-left-bottom content-body_left_bottom"
                  >
                    {{ parkEntQty }}
                  </div>
                </div>
                <div
                  class="content-body-left-box content-body-left_box"
                  style="margin: 0 auto; margin-left: 10px"
                >
                  <div class="content-body-left-top content-body_left_top">
                    入园率
                  </div>
                  <div
                    class="content-body-left-bottom content-body_left_bottom"
                  >
                    {{ admissionRate }}%
                  </div>
                </div>
                <div
                  class="content-body-left-box content-body-left_box"
                  style="margin: 10px auto 5px"
                >
                  <div class="content-body-left-top content-body_left_top">
                    上年度营收
                  </div>
                  <div
                    class="content-body-left-bottom content-body_left_bottom"
                  >
                    {{ parkMainIncome }}
                    <span class="content-body_left_bottom-span">(亿元)</span>
                  </div>
                </div>
                <div
                  class="content-body-left-box content-body-left_box"
                  style="margin: 10px auto 5px; margin-left: 10px"
                >
                  <div class="content-body-left-top content-body_left_top">
                    上年度税收
                  </div>
                  <div
                    class="content-body-left-bottom content-body_left_bottom"
                  >
                    {{ parkActualTax }}
                    <span class="content-body_left_bottom-span">(亿元)</span>
                  </div>
                </div>
                <div
                  class="content-body-left-box content-body-left_box"
                  style="margin: 5px auto 0"
                >
                  <div class="content-body-left-top content-body_left_top">
                    园区总面积
                  </div>
                  <div
                    class="content-body-left-bottom content-body_left_bottom"
                  >
                    {{ allParkArea }}
                    <span class="content-body_left_bottom-span">(亩)</span>
                  </div>
                </div>
                <div
                  class="content-body-left-box content-body-left_box"
                  style="margin: 5px auto 0; margin-left: 10px"
                >
                  <div class="content-body-left-top content-body_left_top">
                    亩均税收
                  </div>
                  <div
                    class="content-body-left-bottom content-body_left_bottom"
                  >
                    {{ parkTaxPerMu }}
                    <span class="content-body_left_bottom-span">(万元/亩)</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="box5 fl w50">
            <div class="content-body-right">
              <div class="tabs" style="margin-top: 10px">
                <div
                  :class="active === 1 ? 'selectActive' : ''"
                  @click="activeClick(1)"
                >
                  营收
                </div>
                <div
                  :class="active === 2 ? 'selectActive' : ''"
                  @click="activeClick(2)"
                >
                  税收
                </div>
                <div
                  :class="active === 3 ? 'selectActive' : ''"
                  @click="activeClick(3)"
                >
                  亩均税收
                </div>
                <div
                  :class="active === 0 ? 'selectActive' : ''"
                  @click="activeClick(0)"
                >
                  园区指数
                </div>
                <!-- <div
                  :class="active === 4 ? 'selectActive' : ''"
                  @click="activeClick(4)"
                  style="float: right; margin-right: 5px"
                >
                  更多
                </div>-->
              </div>
              <div id="tableColor">
                <el-table
                  ref="table"
                  :data="tableData"
                  style="width: 100%"
                  height="170"
                  :row-class-name="tableRowClassName"
                  :row-style="{ height: '0' }"
                  :cell-style="{ padding: '6px 0', height: '36px' }"
                >
                  <el-table-column
                    property="parkName"
                    :show-overflow-tooltip="true"
                    width="90"
                    label="产业类型"
                  >
                    <template scope="scope">
                      <span
                        style="cursor: pointer"
                        @click="goParkOverviewDetail(scope.row)"
                        >{{ scope.row.parkName }}</span
                      >
                    </template>
                  </el-table-column>
                  <el-table-column
                    property="showInfo"
                    :show-overflow-tooltip="true"
                    :label="showInfo"
                  ></el-table-column>
                  <el-table-column
                    type="index"
                    header-align="center"
                    align="center"
                    width="80"
                    :show-overflow-tooltip="true"
                    label="全省排名"
                  ></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-col>
        <el-col class="box" style="margin-bottom: 5px">
          <div class="title">
            <p>化工企业名录</p>
          </div>
          <div class="content-body" id="tableColor1" style="margin-top: 10px">
            <el-col :span="12">
              <el-table
                ref="table1"
                :data="tableData1"
                style="width: 100%"
                height="195"
                :row-style="{ height: '0' }"
                :cell-style="{ padding: '6px 0', height: '36px' }"
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  type="index"
                  :show-overflow-tooltip="true"
                  align="center"
                  width="50"
                  label="序号"
                ></el-table-column>
                <el-table-column
                  property="entName"
                  :show-overflow-tooltip="true"
                  align="center"
                  label="企业名称"
                ></el-table-column>
              </el-table>
            </el-col>
            <el-col :span="12">
              <div
                id="enterpriseNumber"
                style="width: 100%; height: 200px"
              ></div>
            </el-col>
          </div>
        </el-col>
      </el-col>
      <el-col
        :span="7"
        class="content-center"
        style="background-color: (255, 255, 255, 0.5); position: relative"
      >
        <div id="map" style="width: 100%; height: 510px"></div>
        <div class="box" style="margin-top: 10px; margin-bottom: 5px">
          <div class="title">
            <p>安全生产概览</p>
          </div>
          <div class="content-body" style="margin-top: 5px">
            <div style="width: 50%; float: left; position: relative">
              <div id="workmanship" style="width: 100%; height: 205px"></div>
              <div class="legend">
                <div
                  class="legendColor"
                  :style="{ 'background-color': legendColor3 }"
                ></div>
                <div>{{ legendValue3 }}</div>
              </div>
              <div class="aperture"></div>
            </div>
            <div style="width: 50%; float: left; position: relative">
              <div id="source" style="width: 100%; height: 205px"></div>
              <div class="legend">
                <div
                  class="legendColor"
                  :style="{ 'background-color': legendColor4 }"
                ></div>
                <div>{{ legendValue4 }}</div>
              </div>
              <div class="aperture"></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="content-right">
        <el-col class="box">
          <div class="title">
            <p>产业分类概况</p>
          </div>
          <el-col :span="10">
            <div>
              <div
                class="content-body"
                style="margin-top: 2px; position: relative"
              >
                <div
                  id="industryClassification"
                  style="width: 100%; height: 197px"
                ></div>
                <div class="legend">
                  <div
                    class="legendColor"
                    :style="{ 'background-color': legendColor5 }"
                  ></div>
                  <div>{{ legendValue5 }}</div>
                </div>
                <div class="aperture aperture1"></div>
              </div>
            </div>
          </el-col>
          <el-col :span="14">
            <div class="content-body" style="height: 207px; margin-top: 2px">
              <el-table
                ref="table2"
                :data="industrialEntInfo"
                style="width: 100%"
                height="190"
                stripe
                :row-class-name="tableRowClassName"
                :row-style="{ height: '0' }"
                :cell-style="{ padding: '6px 0', height: '36px' }"
              >
                <el-table-column
                  type="index"
                  :show-overflow-tooltip="true"
                  width="50"
                  align="center"
                  label="序号"
                ></el-table-column>
                <el-table-column
                  property="name"
                  :show-overflow-tooltip="true"
                  width="120"
                  label="园区名称"
                ></el-table-column>

                <el-table-column
                  property="value"
                  header-align="center"
                  align="center"
                  :show-overflow-tooltip="true"
                  label="营收(亿元)"
                >
                  <template slot-scope="scope">
                    <span
                      style="
                        font-weight: 600;
                        background: -webkit-linear-gradient(90deg,#ffca12,#ffffff);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                      "
                      >{{ scope.row.value }}</span
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-col>
        <el-col class="box">
          <div class="title">
            <p>产业运行概览</p>
          </div>
          <div class="content-body" id="tableColor2" style="margin: 4px auto">
            <el-col :span="10">
              <div class="tabs" style="width: fit-content">
                <div
                  :class="active2 === 'A' ? 'selectActive' : ''"
                  @click="active2Click('A')"
                >
                  A类
                </div>
                <div
                  :class="active2 === 'B' ? 'selectActive' : ''"
                  @click="active2Click('B')"
                >
                  B类
                </div>
              </div>
              <div style="position: relative;">
                <div
                  id="IndustrialOperation"
                  style="width: 100%; height: 165px"
                ></div>
                <div class="legend">
                  <div
                    class="legendColor"
                    :style="{ 'background-color': legendColor7 }"
                  ></div>
                  <div >{{ legendValue7 }}</div>
                </div>
                <div class="aperture aperture2"></div>
              </div>
            </el-col>
            <el-col :span="14">
              <el-table
                ref="table2"
                :data="tableData2"
                style="width: 100%"
                height="205"
                :row-style="{ height: '0' }"
                :cell-style="{ padding: '5px 0', height: '36px' }"
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  type="index"
                  :show-overflow-tooltip="true"
                  label="序号"
                  align="center"
                ></el-table-column>
                <el-table-column
                  property="entName"
                  :show-overflow-tooltip="true"
                  label="企业名称"
                ></el-table-column>
              </el-table>
            </el-col>
          </div>
        </el-col>
        <div class="box" style="width: 48%; float: left; margin-bottom: 5px">
          <div class="title">
            <p>环保概览</p>
          </div>
          <div class="content-body" style="margin: 5px auto; height: 210px">
            <ul>
              <li
                class="overview"
                v-for="(item, index) in overviewArr"
                :key="index"
              >
                <img
                  src="../../../../assets/img/industry/废水监测.png"
                  height="100%"
                  alt
                />
                <span style="margin-left: 10px">{{ item.name }}</span>
                <span style="float: right; margin-right: 20px">
                  <span> {{ item.num }}个 </span>
                </span>
              </li>
            </ul>
          </div>
        </div>
        <div class="box" style="width: 48%; float: right; margin-bottom: 5px">
          <div class="title" style="padding-left: 5px">
            <p>危化品概况</p>
          </div>
          <div class="content-body">
            <div class="content-body-top">
              <div class="box-title" style="margin: 10px auto">
                <div
                  style="
                    width: 4px;
                    height: 16px;
                    background-color: #00a3ff;
                    float: left;
                  "
                ></div>
                <span style="color: #52ccff">&nbsp;危化品企业</span>
              </div>
              <div class="box-body" style="margin-top: 0">
                <el-row type="flex" class="flexbox" justify="space-around">
                  <el-col :span="11" class="enterprise-box">
                    <div>生产</div>

                    <div>
                      <span class="active">{{ productionEntQty }}</span
                      >家
                    </div>
                  </el-col>
                  <el-col :span="11" class="enterprise-box">
                    <div>经营</div>
                    <div>
                      <span class="active">{{ transportEntQty }}</span
                      >家
                    </div>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  class="flexbox"
                  justify="space-around"
                  style="margin-top: 5px"
                >
                  <el-col :span="11" class="enterprise-box">
                    <div>运输</div>
                    <div>
                      <span class="active">{{ experienceEntQty }}</span
                      >家
                    </div>
                  </el-col>
                  <el-col :span="11" class="enterprise-box">
                    <div>其他</div>
                    <div>
                      <span class="active">{{ otherEntQty }}</span
                      >家
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="box-title" style="margin: 10px auto">
                <div
                  style="
                    width: 4px;
                    height: 16px;
                    background-color: #00a3ff;
                    float: left;
                  "
                ></div>
                <span style="color: #52ccff">&nbsp;危化品车辆运输</span>
              </div>
              <div class="box-body" style="overflow: hidden; margin: 8px auto">
                <div
                  class="box-body-left"
                  style="float: left; width: 50%; padding: 0 4px"
                >
                  <div style="color: #fff; font-size: 18px; text-align: center">
                    <img
                      src="../../../../assets/img/industry/货车.png"
                      alt
                      style="width: 41px; height: 33px"
                    />
                    <span class="active">{{ inTransitCarQty }}</span>
                    辆
                  </div>
                  <div
                    style="color: #a6d5f6; font-size: 12px; text-align: center"
                  >
                    实时在途车辆
                  </div>
                </div>
                <div
                  class="box-body-right"
                  style="float: left; width: 50%; padding: 0 5px"
                >
                  <div style="color: #fff; font-size: 18px; text-align: center">
                    <img
                      src="../../../../assets/img/industry/总量.png"
                      alt
                      style="width: 33px; height: 33px"
                    />
                    <span class="active">{{ totalLoadingToday }}</span>
                    吨
                  </div>
                  <div
                    style="color: #a6d5f6; font-size: 12px; text-align: center"
                  >
                    今日装货总量
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
</script>
<script>
const echarts = require("echarts");
import dd from "gdt-jsapi";
import govheader from "@/components/govheader2";
import govnavigation from "@/components/govnavigation2";
import "echarts-gl";

export default {
  name: "zfIntelligentDiagnostic",
  components: { govheader, govnavigation },
  data() {
    return {
      optionData3: [],
      optionData4: [],
      optionData5: [],
      optionData7: [],
      colorList: [
        "rgba(38,153,161,.8)",
        "rgba(222,128,66,.8)",
        "rgba(222,179,92,.8)",
        "rgba(167,219,245,.8)",
        "rgba(28,85,165,.9)",
      ],
      colorList1: [
        "#0594ef",
        "#0577ea",
        "#65ce99",
        "#f3f286",
        "#ffcb5b",
        "#b74aed",
      ],
      zfNameflag: true,
      year: "",
      center: "",
      industryEntQty: "",
      industryGsEntQty: "",
      industryMainIncome: "",
      industryActualTax: "",
      parkEntQty: "",
      admissionRate: "",
      parkMainIncome: "",
      parkActualTax: "",
      allParkArea: "",
      parkTaxPerMu: "",
      productionEntQty: "",
      transportEntQty: "",
      experienceEntQty: "",
      otherEntQty: "",
      inTransitCarQty: "",
      totalLoadingToday: "",
      industrialEntInfo: [],
      tableData: [],
      tableData1: [],
      tableData2: [],
      parkInfo: {
        parkName: "园区名称",
        entQty: "0",
        address: "",
        primeMoverIndustry: "",
        parkMainIncome: "0",
      },
      overviewArr: [
        {
          name: "废水监测站",
          num: "",
        },
        {
          name: "废气监测站",
          num: "",
        },
        {
          name: "大气监测站",
          num: "",
        },
        {
          name: "水监测站",
          num: "",
        },
      ],
      active: 1,
      active2: "A",
      showInfo: "营收(亿元)",
      option1xAxisData: [],
      option1Data1: [],
      option1Data2: [],
      myChart1: "",
      option1: "",
      myChart2: "",
      option2: "",
      center: "",
      center2: "",
      myChart3: "",
      option3: "",
      myChart4: "",
      option4: "",
      myChart5: "",
      option5: "",
      myChart6: "",
      option6: "",
      myChart7: "",
      option7: "",
      legendColor3: "",
      legendValue3: "",
      legendColor4: "",
      legendValue4: "",
      legendColor5: "",
      legendValue5: "",
      legendColor7: "",
      legendValue7: "",
      myChart1IntervalId: "",
      myChart6IntervalId: "",
      timer3: null,
      timer4: null,
      timer5: null,
      timer7: null,
      intervalId: "",
      intervalId1: "",
      intervalId2: "",
      startCharts2:null,
      rotationList:[]
    };
  },
  created() {
    if (window.SITE_CONFIG["sitURL"] === "https://www.plantmate.com/api") {
      dd.getAuthCode({})
        .then((res) => {
          if (res) {
            let params = {
              applicationFlag: "20",
              authCode: res.auth_code,
            };
            this.$http
              .post(`/home/sys/loginfree/authentication`, params)
              .then(({ data: res }) => {
                console.log("res2:", res);
                this.$store.commit("zfName", res.data.lastName);
                if (res.code !== 0) {
                  this.zfNameflag = false;
                }
              })
              .catch(() => {
                this.zfNameflag = false;
              });
          }
        })
        .catch(() => {
          this.zfNameflag = false;
        });
    }
  },
  mounted() {
    this.year = new Date().getFullYear() - 1;
    this.getRevenue();
    this.getEnterpriseNumber();
    this.getright_table();
    this.getright_table1();
    this.getright_table2();
    this.$http
      .post(`/home/government/industryOverview/getParkInfoPage`, {
        searchKey: "income",
        searchYear: this.year,
      })
      .then(({ data: res }) => {
        this.tableData = res.data;
        clearInterval(_this.intervalId);
        this.$refs.table.bodyWrapper.scrollTop = 0;
        this.getright_table();
      })
      .catch(() => {});
    this.$http
      .post(`/home/government/industryOverview/info`, {
        searchYear: this.year,
      })
      .then(({ data: res }) => {
        this.parkInfo.parkName = res.data.parkCoordinate[0].parkName;
        this.parkInfo.entQty = res.data.parkCoordinate[0].entQty;
        this.parkInfo.address = res.data.parkCoordinate[0].address;
        this.parkInfo.primeMoverIndustry =
          res.data.parkCoordinate[0].primeMoverIndustry;
        this.parkInfo.parkMainIncome =
          res.data.parkCoordinate[0].parkMainIncome;
        this.industryEntQty = res.data.parkCoordinate.length;
        this.industryGsEntQty = res.data.industryGsEntQty;
        this.industryMainIncome = res.data.industryMainIncome;
        this.industryActualTax = res.data.industryActualTax;
        this.option1.xAxis[0].data = this.option1xAxisData =
          res.data.industryMainIncomeView.years;
        this.option1.series[0].data = this.option1Data1 =
          res.data.industryMainIncomeView.mainIncome
        this.option1Data2 = res.data.industryMainIncomeView.actualTax
        this.parkEntQty = res.data.parkEntQty
        this.admissionRate = res.data.admissionRate
        this.parkMainIncome = res.data.parkMainIncome
        this.parkActualTax = res.data.parkActualTax
        this.allParkArea = res.data.allParkArea.toFixed(0)
        this.parkTaxPerMu = res.data.parkTaxPerMu
        this.tableData1 = res.data.entNameInfo
        this.option6.yAxis.data = res.data.cityEntQty.cityName
        this.option6.series[0].data = res.data.cityEntQty.entQty
        if (res.data.dangerChemicalTechnology.length > 0) {
          res.data.dangerChemicalTechnology.forEach((item, index) => {
            this.optionData3.push({
              name: item.typeName,
              value: Number(item.technologyQty),
              itemStyle: {
                color: this.colorList[index],
              },
            })
          })
        }
        if (res.data.dangerSource.length > 0) {
          res.data.dangerSource.forEach((item, index) => {
            this.optionData4.push({
              name: item.typeName,
              value: Number(item.sourceQty),
              itemStyle: {
                color: this.colorList[index],
              },
            })
          })
        }

        let map = {}
        res.data.parkCoordinate.forEach((item) => {
          map[item.parkAbbreviation] = [
            item.longitude,
            item.latitude,
            item.parkName,
            item.entQty,
            item.address,
            item.primeMoverIndustry,
            item.parkMainIncome,
          ];
        });
        this.center = map;
        this.overviewArr[0].num = res.data.wasteWaterStateQty;
        this.overviewArr[1].num = res.data.wasteGasStateQty;
        this.overviewArr[2].num = res.data.atmosphereStateQty;
        this.overviewArr[3].num = res.data.waterStateQty;
        this.productionEntQty = res.data.productionEntQty;
        this.transportEntQty = res.data.transportEntQty;
        this.experienceEntQty = res.data.experienceEntQty;
        this.otherEntQty = res.data.otherEntQty;
        this.inTransitCarQty = res.data.inTransitCarQty;
        this.totalLoadingToday = res.data.totalLoadingToday;
        res.data.industrialEntInfo.forEach((item, index) => {
          this.optionData5.push({
            name: item.industryName,
            value: Number(item.standardSizedQty),
            itemStyle: {
              color: this.colorList1[index],
            },
          });
          this.industrialEntInfo.push({
            name: item.industryName,
            value: item.mainBusinessIncome,
          });
        });
        res.data.industrialInfo.forEach((item, index) => {
          this.optionData7.push({
            name: item.minorName,
            value: Number(item.entQty),
            itemStyle: {
              color: this.colorList1[index],
            },
          });
        });
        this.tableData2 = res.data.industrialInfoEnt;
        this.myChart1.setOption(this.option1);
        this.myChart6.setOption(this.option6);
        let flag = true;
        this.myChart1IntervalId = setInterval(() => {
          if (
            this.myChart1 !== "" &&
            this.myChart1 !== null &&
            this.myChart1 !== undefined
          ) {
            this.myChart1.dispose();
          }
          this.getRevenue();
          this.option1.xAxis[0].data = this.option1xAxisData;
          if (flag) {
            this.option1.series[0].itemStyle.color =
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(0,241,233, 1)" },
                { offset: 1, color: "rgba(0,241,233, 0)" },
              ]);
            this.option1.series[0].data = this.option1Data2;
            this.option1.series[0].name = "税收";
          } else {
            this.option1.series[0].itemStyle.color =
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(2, 198, 255, 1)" },
                { offset: 1, color: "rgba(2, 198, 255, 0)" },
              ]);
            this.option1.series[0].data = this.option1Data1;
            this.option1.series[0].name = "营收";
          }
          this.myChart1.setOption(this.option1);
          flag = !flag;
        }, 7000);
        let num1 = 0;
        let num2 = 8;
        this.myChart6IntervalId = setInterval(() => {
          if (
            this.option6.dataZoom[0].startValue + 1 ===
            this.option6.series[0].data.length
          ) {
            num1 = 0;
            num2 = 8;
            this.option6.dataZoom[0].startValue = num1;
            this.option6.dataZoom[0].endValue = num2;
          } else {
            this.option6.dataZoom[0].startValue = num1 += 1;
            this.option6.dataZoom[0].endValue = num2 += 1;
          }
          this.myChart6.setOption(this.option6);
        }, 2000);
        this.$nextTick(() => {
          if (res.data.dangerChemicalTechnology.length > 0) {
            this.getWorkmanship()
          }
          if (res.data.dangerSource.length > 0) {
            this.getSource()
          }

          this.getIndustryClassification()
          this.getIndustrialOperation()
          this.renderMyChart()
          let _this = this
          this.rotationList.forEach(item =>{
            setTimeout(function(){
              _this.bindListen(item)
            }, item.time);
          })
        })
      })
      .catch(() => {});
  },
  beforeDestroy() {
    let _this = this;
    clearInterval(_this.intervalId);
    clearInterval(_this.intervalId1);
    clearInterval(_this.intervalId2);
    clearInterval(_this.myChart1IntervalId);
    clearInterval(_this.timer3);
    clearInterval(_this.timer4);
    clearInterval(_this.timer5);
    clearInterval(_this.timer7);
    clearInterval(_this.startCharts6);
    clearInterval(_this.startCharts2);
  },
  methods: {
    zfNameflagChange(val) {
      this.zfNameflag = val;
    },
    getright_table() {
      let _this = this;
      var isScroll = true;
      var waitFlag = 0;
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      // let height = document.getElementsByClassName('el-table__body-wrapper')[0].childNodes[0]
      // console.log(height);
      this.addEvent(divData, "mouseenter", function () {
        isScroll = false;
      });
      this.addEvent(divData, "mouseleave", function () {
        isScroll = true;
      });
      this.intervalId = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }
      }, 100);
    },
    getright_table1() {
      var isScroll = true;
      var waitFlag = 0;
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table1;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      this.addEvent(divData, "mouseenter", function () {
        isScroll = false;
      });
      this.addEvent(divData, "mouseleave", function () {
        isScroll = true;
      });
      this.intervalId1 = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }
      }, 100);
    },
    getright_table2() {
      var isScroll = true;
      var waitFlag = 0;
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table2;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      this.addEvent(divData, "mouseenter", function () {
        isScroll = false;
      });
      this.addEvent(divData, "mouseleave", function () {
        isScroll = true;
      });
      this.intervalId2 = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }
      }, 100);
    },
    addEvent(obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent("on" + sEvent, fn);
      } else {
        obj.addEventListener(sEvent, fn, false);
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "table-row1";
      } else {
        return "table-row2";
      }
    },
    activeClick(val) {
      let _this = this;
      this.active = val;
      let param;
      if (val === 0) {
        param = "parkIndex";
        this.showInfo = "园区指数";
      } else if (val === 1) {
        param = "income";
        this.showInfo = "营收(亿元)";
      } else if (val === 2) {
        param = "tax";
        this.showInfo = "税收(亿元)";
      } else if (val === 3) {
        param = "muPerTax";
        this.showInfo = "亩均税收(万元)";
      } else if (val === 4) {
        this.showInfo = "muPerTax";
        this.showInfo = "更多";
      }
      this.$http
        .post(`/home/government/industryOverview/getParkInfoPage`, {
          searchKey: param,
          searchYear: this.year,
        })
        .then(({ data: res }) => {
          this.tableData = res.data;
          clearInterval(_this.intervalId);
          this.$refs.table.bodyWrapper.scrollTop = 0;
          this.getright_table();
        })
        .catch(() => {});
    },
    active2Click(val) {
      let _this = this;
      this.active2 = val;
      this.$http
        .post(`/home/government/industryOverview/getMuPerTypePage`, {
          searchYear: this.year,
          muPerType: val,
        })
        .then(({ data: res }) => {
          this.optionData7 = [];
          res.data.industrialInfo.forEach((item, index) => {
            this.optionData7.push({
              name: item.minorName,
              value: Number(item.entQty),
              itemStyle: {
                color: _this.colorList1[index],
              },
            });
          });
          this.myChart7.dispose();
          clearInterval(_this.timer7);
          this.legendValue7 = "";
          this.legendColor7 = "transparent";
          this.getIndustrialOperation();
          this.tableData2 = res.data.industrialInfoEnt;
          clearInterval(_this.intervalId2);
          this.$refs.table2.bodyWrapper.scrollTop = 0;
          this.getright_table2();
        })
        .catch(() => {});
    },
    getRevenue() {
      this.myChart1 = echarts.init(document.getElementById("revenue"));
      this.option1 = {
        animationDuration: 2000,
        tooltip: {
          trigger: "axis",
          confine: true,
        },
        // color: ["#13B9FB"],
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 5,
            xAxisIndex: [0],
            zoomLock: true,
          },
        ],
        legend: {
          top: 0,
          right: 15,
          textStyle: {
            //图例文字的样式
            color: "#fff",
          },
        },
        grid: {
          left: "5%",
          right: "4%",
          top: "20%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisLine: {
              lineStyle: {
                color: "#BFF7FF",
              },
            },
          },
        ],
        yAxis: {
          type: "value",
          name: "亿元",
          axisLine: {
            //这是y轴文字颜色
            lineStyle: {
              color: "#BFF7FF",
            },
          },
        },
        series: [
          {
            name: "营收",
            type: "bar",
            barWidth: 15,
            // itemStyle: {
            //   color: "rgb(97, 133, 255)"
            // },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(2, 198, 255, 1)" },
                { offset: 1, color: "rgba(2, 198, 255, 0)" },
              ]),
            },
            data: [],
          },
        ],
      };
      this.myChart1.setOption(this.option1);
    },
    getEnterpriseNumber() {
      let _this = this;
      this.myChart6 = echarts.init(document.getElementById("enterpriseNumber"));
      this.option6 = {
        // animationDuration: 5000,
        tooltip: {
          trigger: "axis",
          formatter: "{b}:{c}家",
          padding: [0, 5],
        },
        color: ["#13B9FB"],
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 8,
            yAxisIndex: [0],
            zoomLock: false,
          },
        ],

        grid: {
          top: "3%",
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLine: {
            //这是y轴文字颜色
            lineStyle: {
              color: "#BFF7FF",
            },
          },
        },
        yAxis: {
          type: "category",
          // boundaryGap: false,
          data: [],

          axisLine: {
            //这是y轴文字颜色
            lineStyle: {
              color: "#BFF7FF",
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: [20, 20, 20, 20],
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "rgba(189, 231, 253, .5)",
                  },
                  {
                    offset: 0.3,
                    color: "rgba(1, 216, 223, .8)",
                  },
                  {
                    offset: 1,
                    color: "rgba(1, 216, 223, 1)",
                  },
                ]),
              },
            },

            data: [],
          },
        ],
      };
      this.myChart6.setOption(this.option6);
      this.autoPlay(_this.myChart6, _this.option6, "startCharts6");
    },
    // 浙江省地图
    renderMyChart() {
      let _this = this;
      this.myChart2 = echarts.init(document.getElementById("map"));
      let uploadedDataURL = require(".././zhejiang.json");
      let scatterData1 = [];
      for (let item in this.center) {
        scatterData1.push(this.center[item].concat(item));
      }
      echarts.registerMap("js", uploadedDataURL);
      this.option2 = {
        title: {
          text: "浙江省化工产业分布",
          top: "10px",
          textStyle: {
            width: "100%",
            color: "#A6D5F6",
            "font-weight": 700,
          },
        },
        tooltip: {
          trigger: "item",
          extraCssText: "z-index: 9",
          backgroundColor: "transparent",
          borderWidth: 0,
          padding: 0,
          textStyle: {
            color: "#00E4FF",
          },
          formatter: function (para) {
            if (para.seriesType === "effectScatter") {
              let str = `<div style="position: relative;border:1px solid #00d3e7;background-color:rgba(10, 39, 116, .5);padding:5px">
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;top: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;top: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;bottom: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;bottom: -3px;"></div>`;

              str +=
                '<div style="color:#fcaf17;text-align: center;font-weight: 600">' +
                para.data[7] +
                "</div>" +
                '<div style="color:#E4E4E4;font-size:12px;"><span style="display:inline-block;width:100px;">规上企业数</span><span style="display:inline-block;color:#00E4FF">' +
                para.data[3] +
                "(家)</span></div>" +
                '<div style="color:#E4E4E4;font-size:12px;"><span style="display:inline-block;width:100px;">上年度产业营收</span><span style="display:inline-block;color:#00E4FF">' +
                para.data[6] +
                "(亿元)</span></div>" +
                '<div style="color:#E4E4E4;font-size:12px;"><span style="display:inline-block;width:100px;">主要产业</span><span style="display:inline-block;color:#00E4FF">' +
                para.data[5] +
                "</span></div>" +
                '<div style="color:#E4E4E4;font-size:12px;"><span style="display:inline-block;width:100px;">园区地址</span><span style="display:inline-block;color:#00E4FF">' +
                para.data[4] +
                "</span></div>" +
                `</div>`;
              return str;
            } else {
              return "";
            }
          },
        },
        geo: [
          {
            map: "js",
            aspectScale: 0.9,
            roam: true, // 是否允许缩放
            layoutSize: "100%",
            layoutCenter: ["50%", "50%"],
            zoom: 0.9,
            itemStyle: {
              areaColor: "#113D8D",
              borderColor: "rgb(27, 172, 255)",
              borderWidth: 1,
            },
            emphasis: {
              itemStyle: {
                areaColor: "#005ddc",
              },
              label: {
                show: true,
                color: "#ffffff",
              },
            },
            label: {
              show: true,
              color: "#ffffff",
            },
            zlevel: 3,
          },
        ],
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            symbol: "circle",
            symbolSize: 6,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "fill",
              scale: 3,
            },
            hoverAnimation: true,
            itemStyle: {
              color: "rgb(0, 141, 221)",
            },
            label: {
              normal: {
                formatter: function (para) {
                  return para.data[7];
                },
                position: "right",
                color: "#333333",
                borderColor: "#005DDC",
                borderWidth: 1,
                borderType: "solid",
                padding: 5,
                backgroundColor: "rgba(255, 255, 255, 1)",
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            emphasis: {
              label: {
                show: true,
              },
              itemStyle: {
                color: "rgb(255, 155, 55)",
                borderColor: "rgb(255, 155, 55)",
                borderWidth: 6,
              },
            },
            data: scatterData1,
            zlevel: 10,
          },
        ],
      };
      this.myChart2.setOption(this.option2);
      this.mapAutoPlay(_this.myChart2, _this.option2, "startCharts2");
    },
    getWorkmanship() {
      let _this = this;
      this.myChart3 = echarts.init(document.getElementById("workmanship"));
      this.option3 = this.getPie3D(
        _this.optionData3,
        0.8,
        "丨危险化工工艺",
        30,
        250
      );
      this.myChart3.setOption(_this.option3);
      this.rotationList.push({
        myChart:_this.myChart3,
        option: _this.option3,
        num: '3',
        timer:'timer3',
        time: 1000
      })
    },
    getSource() {
      let _this = this;
      this.myChart4 = echarts.init(document.getElementById("source"));
      this.option4 = this.getPie3D(_this.optionData4, 0.8, "丨危险源", 30, 250);
      this.myChart4.setOption(_this.option4);
      this.rotationList.push({
        myChart:_this.myChart4,
        option: _this.option4,
        num: '4',
        timer:'timer4',
        time: 2000
      })
    },
    getIndustryClassification() {
      let _this = this;
      this.myChart5 = echarts.init(
        document.getElementById("industryClassification")
      );
      this.option5 = this.getPie3D(_this.optionData5, 0, "", 30, 350);
      this.myChart5.setOption(_this.option5);
      this.rotationList.push({
        myChart:_this.myChart5,
        option: _this.option5,
        num: '5',
        timer:'timer5',
        time: 3000
      })
    },
    getIndustrialOperation() {
      const _this = this;
      this.myChart7 = echarts.init(
        document.getElementById("IndustrialOperation")
      );
      this.option7 = this.getPie3D(_this.optionData7, 0, "丨企业分布", 30, 380);
      this.myChart7.setOption(_this.option7);
      this.rotationList.push({
        myChart:_this.myChart7,
        option: _this.option7,
        num: '7',
        timer:'timer7',
        time: 4000
      })
    },
    goParkOverviewDetail(val) {
      let _this = this;
      clearInterval(_this.myChart1IntervalId);
      clearInterval(_this.myChart6IntervalId);
      this.$router.push({
        name: 'zfParkOverviewDetailTwo',
        query: {
          parkCode: val.parkCode,
          parkName: val.parkAllName,
          longitude: val.longitude,
          latitude: val.latitude,
          year: this.year,
        },
      });
    },
    mapAutoPlay(myChart, option, timer) {
      var _this = this;
      let flag = true;
      let charPiecurrentIndex = 0;
      // 鼠标移动上去的时候的高亮动画
      myChart.on("mouseover", function (param) {
        if (param.componentType === "series") {
          flag = false;
          clearInterval(_this[timer]);
          //取消之前高亮图形
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: charPiecurrentIndex,
          });

          charPiecurrentIndex = param.dataIndex;
          //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮
          let data = option.series[0].data[charPiecurrentIndex];
          if (data) {
            _this.parkInfo.parkName = data[2];
            _this.parkInfo.entQty = data[3];
            _this.parkInfo.address = data[4];
            _this.parkInfo.primeMoverIndustry = data[5];
            _this.parkInfo.parkMainIncome = data[6];
          }

          //高亮当前图形
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });

          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });
        }
      });

      //图标随窗口大小缩放
      window.addEventListener("resize", function () {
        myChart.resize();
      });

      //自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen;

        let data = option.series[0].data[charPiecurrentIndex];
        _this.parkInfo.parkName = data[2];
        _this.parkInfo.entQty = data[3];
        _this.parkInfo.address = data[4];
        _this.parkInfo.primeMoverIndustry = data[5];
        _this.parkInfo.parkMainIncome = data[6];

        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
      };

      //高亮当前图形
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      });

      _this[timer] = setInterval(chartHover, 5000);
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on("mouseout", function (param) {
        if (!flag) {
          _this[timer] = setInterval(chartHover, 5000);
          flag = true;
        }
      });
    },
    // 饼状图自动播放
    autoPlay(myChart, option, timer) {
      var that = this;
      let flag = true;
      let charPiecurrentIndex = 0;
      // 鼠标移动上去的时候的高亮动画
      myChart.on("mouseover", function (param) {
        flag = false;
        clearInterval(that[timer]);
        //取消之前高亮图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });

        charPiecurrentIndex = param.dataIndex;
        //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

        //高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: param.dataIndex,
        });

        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: param.dataIndex,
        });
      });

      //图标随窗口大小缩放
      window.addEventListener("resize", function () {
        myChart.resize();
      });

      //自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen;

        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
      };

      that[timer] = setInterval(chartHover, 2000);
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on("mouseout", function (param) {
        if (!flag) {
          that[timer] = setInterval(chartHover, 2000);
          flag = true;
        }
      });
    },

    getPie3D(pieData, internalDiameterRatio, title, alpha, distance) {
      //internalDiameterRatio:透明的空心占比
      let that = this;
      let series = [];
      let sumValue = 0;
      let startValue = 0;
      let endValue = 0;
      let legendData = [];
      let legendBfb = [];
      let k = 1 - internalDiameterRatio;
      pieData.sort((a, b) => {
        return b.value - a.value;
      });
      // 为每一个饼图数据，生成一个 series-surface 配置
      for (let i = 0; i < pieData.length; i++) {
        sumValue += pieData[i].value;
        let seriesItem = {
          name:
            typeof pieData[i].name === "undefined"
              ? `series${i}`
              : pieData[i].name,
          type: "surface",
          parametric: true,
          wireframe: {
            show: false,
          },
          pieData: pieData[i],
          pieStatus: {
            selected: false,
            hovered: false,
            k: k,
          },
          center: ["10%", "50%"],
        };

        if (typeof pieData[i].itemStyle != "undefined") {
          let itemStyle = {};
          typeof pieData[i].itemStyle.color != "undefined"
            ? (itemStyle.color = pieData[i].itemStyle.color)
            : null;
          typeof pieData[i].itemStyle.opacity != "undefined"
            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
            : null;
          seriesItem.itemStyle = itemStyle;
        }
        series.push(seriesItem);
      }

      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
      legendData = [];
      legendBfb = [];
      for (let i = 0; i < series.length; i++) {
        endValue = startValue + series[i].pieData.value;
        series[i].pieData.startRatio = startValue / sumValue;
        series[i].pieData.endRatio = endValue / sumValue;
        series[i].parametricEquation = this.getParametricEquation(
          series[i].pieData.startRatio,
          series[i].pieData.endRatio,
          false,
          false,
          k,
          series[i].pieData.value
        );
        startValue = endValue;
        let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
        legendData.push({
          name: series[i].name,
          value: bfb,
        });
        legendBfb.push({
          name: series[i].name,
          value: bfb,
        });
      }
      let boxHeight = this.getHeight3D(series, 40); //通过传参设定3d饼/环的高度，26代表26px
      // 准备待返回的配置项，把准备好的 legendData、series 传入。
      let option = {
        animationDuration: 5000,
        // legend: {
        //   data: legendData,
        //   orient: 'horizontal',
        //   type:'scroll',
        //   pageTextStyle: {
        //     color: "#A1E2FF"
        //   },
        //   pageIconColor: "#29bca8", // 可以点击的翻页按钮颜色
        //   pageIconInactiveColor: "#7f7f7f", // 禁用的按钮颜色
        //   left: 10,
        //   bottom: 10,
        //   itemGap: 10,
        //   textStyle: {
        //       color: '#A1E2FF',
        //   },
        //   show: true,
        //   itemHeight: 14,
        //   itemWidth: 14,
        // formatter: function(param) {
        //     let item = legendBfb.filter(item => item.name == param)[0];
        //     let bfs = that.fomatFloat(item.value * 100, 2) + "%";
        //     return `${item.name}  ${bfs}`;
        // }
        // },
        title: {
          text: title,
          top: 0,
          left: "10px",
          textStyle: {
            width: "100%",
            color: "#52CCFF",
            fontSize: 14,
            fontWeight: 600,
          },
        },
        tooltip: {
          confine: true,
          padding: [0, 5],
          formatter: (params) => {
            if (
              params.seriesName !== "mouseoutSeries" &&
              params.seriesName !== "pie2d"
            ) {
              // let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
              //   100).toFixed(2);
              return (
                `${params.seriesName}<br/>` +
                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
                `${option.series[params.seriesIndex].pieData.value}个`
              );
            }
          },
        },
        xAxis3D: {
          min: -1,
          max: 1,
        },
        yAxis3D: {
          min: -1,
          max: 1,
        },
        zAxis3D: {
          min: -1,
          max: 2,
        },
        grid3D: {
          show: false,
          boxHeight: boxHeight, //圆环的高度
          viewControl: {
            //3d效果可以放大、旋转等，请自己去查看官方配置
            alpha: alpha, //角度
            distance: distance, //调整视角到主体的距离，类似调整zoom
            rotateSensitivity: 0, //设置为0无法旋转
            zoomSensitivity: 0, //设置为0无法缩放
            panSensitivity: 0, //设置为0无法平移
            autoRotate: false, //自动旋转
          },
        },
        series: series,
      };
      return option;
    },

    //获取3d丙图的最高扇区的高度
    getHeight3D(series, height) {
      series.sort((a, b) => {
        return b.pieData.value - a.pieData.value;
      });
      return (height * 25) / series[0].pieData.value;
    },

    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
      // 计算
      let midRatio = (startRatio + endRatio) / 2;
      let startRadian = startRatio * Math.PI * 2;
      let endRadian = endRatio * Math.PI * 2;
      let midRadian = midRatio * Math.PI * 2;
      // 如果只有一个扇形，则不实现选中效果。
      if (startRatio === 0 && endRatio === 1) {
        isSelected = false;
      }
      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
      k = typeof k !== "undefined" ? k : 1 / 3;
      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
      let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
      let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
      // 计算高亮效果的放大比例（未高亮，则比例为 1）
      let hoverRate = isHovered ? 1.2 : 1;
      // 返回曲面参数方程
      return {
        u: {
          min: -Math.PI,
          max: Math.PI * 3,
          step: Math.PI / 32,
        },
        v: {
          min: 0,
          max: Math.PI * 2,
          step: Math.PI / 20,
        },
        x: function (u, v) {
          if (u < startRadian) {
            return (
              offsetX +
              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          if (u > endRadian) {
            return (
              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
        },
        y: function (u, v) {
          if (u < startRadian) {
            return (
              offsetY +
              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          if (u > endRadian) {
            return (
              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
        },
        z: function (u, v) {
          if (u < -Math.PI * 0.5) {
            return Math.sin(u);
          }
          if (u > Math.PI * 2.5) {
            return Math.sin(u) * h * 0.1;
          }
          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
        },
      };
    },

    fomatFloat(num, n) {
      var f = parseFloat(num);
      if (isNaN(f)) {
        return false;
      }
      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
      var s = f.toString();
      var rs = s.indexOf(".");
      //判定如果是整数，增加小数点再补0
      if (rs < 0) {
        rs = s.length;
        s += ".";
      }
      while (s.length <= rs + n) {
        s += "0";
      }
      return s;
    },

    bindListen(json) {
      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
      let that = this;
      let flag = true;
      // let selectedIndex = '';
      let hoveredIndex = "";
      let seriesIndex = 0;
      let seriesName = "";
      // eslint-disable-next-line no-unused-vars
      let dataIndex = 0;
      // 监听 mouseover，近似实现高亮（放大）效果
      json.myChart.on("mouseover", function (params) {
        clearInterval(that[json.timer]);
        flag = false;
        seriesIndex = params.seriesIndex;
        seriesName = params.seriesName;
        let isSelected;
        let isHovered;
        let startRatio;
        let endRatio;
        let k;
        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
        if (hoveredIndex === params.seriesIndex) {
          return;
          // 否则进行高亮及必要的取消高亮操作
        } else {
          if (hoveredIndex !== "") {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
            isSelected = json.option.series[hoveredIndex].pieStatus.selected;
            isHovered = false;
            startRatio = json.option.series[hoveredIndex].pieData.startRatio;
            endRatio = json.option.series[hoveredIndex].pieData.endRatio;
            k = json.option.series[hoveredIndex].pieStatus.k;
            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
            json.option.series[hoveredIndex].parametricEquation =
              that.getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                json.option.series[hoveredIndex].pieData.value
              );
            json.option.series[hoveredIndex].pieStatus.hovered = isHovered;
            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
            hoveredIndex = "";
          }
          isSelected = json.option.series[seriesIndex].pieStatus.selected;
          isHovered = true;
          startRatio = json.option.series[seriesIndex].pieData.startRatio;
          endRatio = json.option.series[seriesIndex].pieData.endRatio;
          k = json.option.series[seriesIndex].pieStatus.k;
          // 对当前点击的扇形，执行高亮操作（对 option 更新）
          json.option.series[seriesIndex].parametricEquation =
            that.getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              json.option.series[seriesIndex].pieData.value + 5
            );
          json.option.series[seriesIndex].pieStatus.hovered = isHovered;
          that["legendColor" + json.num] =
            json.option.series[seriesIndex].itemStyle.color;
          that["legendValue" + json.num] =
            json.option.series[seriesIndex].name +
            " : " +
            (
              (json.option.series[seriesIndex].pieData.endRatio -
                json.option.series[seriesIndex].pieData.startRatio) *
              100
            ).toFixed(2) +
            "%";
          // 记录上次高亮的扇形对应的系列号 seriesIndex
          hoveredIndex = seriesIndex;
          json.myChart.setOption(json.option);
        }
      });
      var chartHover = function () {
        console.time("sort");
        // 准备重新渲染扇形所需的参数
        let isSelected;
        let isHovered;
        let startRatio;
        let endRatio;
        let k;
        // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
        if (seriesIndex === json.option.series.length) {
          seriesIndex = 0;
        }
        if (hoveredIndex !== "") {
          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
          isSelected = json.option.series[hoveredIndex].pieStatus.selected;
          isHovered = false;
          startRatio = json.option.series[hoveredIndex].pieData.startRatio;
          endRatio = json.option.series[hoveredIndex].pieData.endRatio;
          k = json.option.series[hoveredIndex].pieStatus.k;
          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
          json.option.series[hoveredIndex].parametricEquation =
            that.getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              json.option.series[hoveredIndex].pieData.value
            );
          json.option.series[hoveredIndex].pieStatus.hovered = isHovered;
          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
          hoveredIndex = "";
        }
        // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
        isSelected = json.option.series[seriesIndex].pieStatus.selected;
        isHovered = true;
        startRatio = json.option.series[seriesIndex].pieData.startRatio;
        endRatio = json.option.series[seriesIndex].pieData.endRatio;
        k = json.option.series[seriesIndex].pieStatus.k;
        // 对当前点击的扇形，执行高亮操作（对 option 更新）
        json.option.series[seriesIndex].parametricEquation =
          that.getParametricEquation(
            startRatio,
            endRatio,
            isSelected,
            isHovered,
            k,
            json.option.series[seriesIndex].pieData.value + 5
          );
        json.option.series[seriesIndex].pieStatus.hovered = isHovered;
        that["legendColor" + json.num] = json.option.series[seriesIndex].itemStyle.color;
        that["legendValue" + json.num] =
          json.option.series[seriesIndex].name +
          " : " +
          (
            (json.option.series[seriesIndex].pieData.endRatio -
              json.option.series[seriesIndex].pieData.startRatio) *
            100
          ).toFixed(2) +
          "%";
        // 记录上次高亮的扇形对应的系列号 seriesIndex
        hoveredIndex = seriesIndex;
        // 使用更新后的 option，渲染图表
        json.myChart.setOption(json.option);
        seriesIndex++;
        console.timeEnd("sort");
      };
      // 修正取消高亮失败的 bug
      json.myChart.on("globalout", function () {
        if (!flag) {
          that[json.timer] = setInterval(chartHover, 5000);
          flag = true;
        }
      });
      that[json.timer] = setInterval(chartHover, 5000);
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  background-size: 100% 100%;
  background: #041565;
}

.box {
  padding-top: 10px;
  margin-bottom: 20px;
  overflow: hidden;
  background-image: url("../../../../assets/img/industry/框尺寸1.png");
  background-size: 100% 100%;
}

.content {
  padding: 20px 0 0;
  // padding: 5px 10px;
}
.content-body {
  padding: 5px;
  margin-top: 5px;
  overflow: hidden;
  > div {
    float: left;
    overflow: hidden;
  }
  .content-body-left {
    width: 44%;
  }
  .content-body-right {
    width: 56%;
  }
}
.content-body-left-top {
  font-size: 12px;
  text-align: center;
}
.tabs {
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
  > div {
    float: left;
    color: #7db2d0;
    padding: 0 7px;
    cursor: pointer;
    font-size: 12px;
    height: 26px;
    line-height: 26px;
  }
}
.selectActive {
  // color: #00a3ff !important;
  font-weight: 600;
  color: #52ccff !important;
  text-align: center;
  background: linear-gradient(
    0deg,
    rgba(0, 180, 255, 0.4),
    rgba(0, 180, 255, 0.05)
  );
  border: 1px solid #000000;
  border-radius: 3px;
}
.content-body-left-box {
  width: 44%;
  margin: 1% 3%;
  float: left;
  background: transparent;
}
.content-body-left-bottom {
  font-weight: 600;
  font-size: 18px;
  margin: 15px auto;
  height: 50px;

  background-size: 100% 100%;

  text-align: center;

  p {
    color: transparent;
    background-image: -webkit-linear-gradient(#fff, #f0c41b, #fff, #f0c41b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.content-body-left_bottom {
  background: url("../../../../assets/img/industry/数据背景框1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.content-body-top {
  width: 94%;
  margin: 0 auto;
  float: none !important;
}
.colorBox {
  height: 54px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 12px;
  color: #ffffff;
}
.overview {
  height: 50px;
  line-height: 50px;
  & > span {
    color: #ffffff;
    &:nth-of-type(2) {
      width: 50px;
      height: 40px;
      margin-top: 10px;
      line-height: 20px;
      text-align: center;

      background: url("../../../../assets/img/industry/数据展示框3.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      & > span {
        color: transparent;
        background-image: -webkit-linear-gradient(#fff, #f0c41b, #fff, #f0c41b);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 12px;
      }
    }
  }
}
.enterprise-box {
  // background-color: rgb(219, 239, 255);
  border-radius: 15px;
  overflow: hidden;
  padding: 10px 5px;
  color: #fff;
  > div:nth-child(1) {
    float: left;
  }
  > div:nth-child(2) {
    float: right;
  }
}
.content-body /deep/ .el-table th {
  background-color: #cadfff !important;
  color: #4a6899;
  font-size: 12px;
  padding: 6px 0;
}
.content-body /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.content-body /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
#tableColor,
#tableColor1,
#tableColor2,
#tableColor3,
#tableColor4 {
  width: 100%;
}
#tableColor /deep/ .el-table__header .is-leaf {
  padding: 8px 0 !important;
}
 /deep/ .el-table__body {
  width: 100% !important;
}

.content-body #tableColor /deep/ .statistics-warning-row,
.content-body #tableColor1 /deep/ .statistics-warning-row,
.content-body #tableColor2 /deep/ .statistics-warning-row,
.content-body #tableColor3 /deep/ .statistics-warning-row,
.content-body #tableColor4 /deep/ .statistics-warning-row {
  background-color: #d6e6ff !important;
}
.map-info {
  position: absolute;
  left: 10px;
  top: 370px;
  width: 60%;
  height: 120px;
  background-image: url("../../../../assets/img/zf/map-info-bg.png");
  background-size: 100% 100%;
  z-index: 99;
  padding: 15px 10px;
  .park-name {
    width: 100%;
    font-size: 14px;
    color: #0044f3;
    font-weight: bold;
    padding-bottom: 5px;
    border-bottom: 1px solid #4076ff;
    margin-bottom: 3px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .park-info {
    width: 100%;
    color: #001b5f;
    font-size: 12px;
    line-height: 18px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
//滚动条的宽度
.main ::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  display: none;
}
.main ::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 90, 255, 0);
}
.main ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 90, 255, 0);
  border-radius: 10px;
  background: #ededed;
}
.content-body-left-top {
  color: #a6d5f6;
}
.content-body-left_box {
  width: 120px;
  height: 58px;
  margin-left: 10px;
  overflow: hidden;
  background: url("../../../../assets/img/industry/数据背景框2.png");
  background-size: 100% 100%;
}

.title {
  width: 270px;
  margin-left: 10px;
  font-weight: 700;
  font-size: 14px;
  background-image: url("../../../../assets/img/industry/小标题背景1.png");
  background-size: 100% 100%;
  color: #ffffff;

  p {
    padding-left: 26px;
    font-size: 12px;
  }
}

.content-body_left_bottom {
  color: #ffca12;
  font-size: 16px;
  color: #ffffff;
  background-image: -webkit-linear-gradient(#fff, #f0c41b, #fff, #f0c41b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  margin-top: 10px;
  &-span {
    font-size: 10px;
    color: #ffffff;
  }
}
.content-body_left_top {
  color: #ffffff;
  margin-top: 10px;
}
.fl {
  float: left;
}
.w50 {
  width: 50%;
}
.fr {
  float: right;
}
/deep/ .table-row1 {
  background-color: #082560 !important;
}
/deep/ .table-row2 {
  background-color: #051e79 !important;
}

.content-body #tableColor /deep/ .statistics-warning-row,
.content-body #tableColor1 /deep/ .statistics-warning-row,
.content-body #tableColor2 /deep/ .statistics-warning-row,
.content-body #tableColor3 /deep/ .statistics-warning-row,
.content-body #tableColor4 /deep/ .statistics-warning-row {
  background-color: #00155a !important;
}
.content-body #tableColor1 /deep/ .statistics-warning-row {
  background-color: #00155a !important;
}
.content-body-right /deep/ .el-table tr {
  th {
    border: none;
  }
  td {
    border: none;
  }
}
.content-body /deep/ .el-table tr {
  th {
    border: none;
  }
  td {
    border: none;
  }
}

.content-body /deep/ .el-table tr {
  color: #bbdaff;
}
.content-body-right /deep/ .el-table tr {
  color: #bbdaff;
}
.content-body-right /deep/.has-gutter {
  background: #022b7e !important;
  tr {
    background: #022b7e !important;
    th {
      background: #022b7e !important;
      color: #00e4ff;
      font-size: 12px;
    }
  }
}
.content-body /deep/.has-gutter {
  background: #022b7e !important;
  tr {
    background: #022b7e !important;
    th {
      background: #022b7e !important;
      color: #00e4ff;
    }
  }
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: transparent;
}
.flexbox {
  background: #022b7e;
}
.active {
  color: transparent;
  background-image: -webkit-linear-gradient(#fff, #f0c41b, #fff, #f0c41b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.content-body /deep/ .el-table tbody tr:hover > td {
  background-color: #5f83ff !important;
}
.content-body-right /deep/ .el-table tbody tr:hover > td {
  background-color: #5f83ff !important;
}
/deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent; //没有数据也变颜色
}
.legend {
  position: absolute;
  bottom: 10px;
  left: 5%;
  color: #a1e2ff;
  text-align: center;
  overflow: hidden;
  > div {
    float: left;
  }
}
.legendColor {
  width: 20px;
  height: 12px;
  line-height: 14px;
  border-radius: 3px;
  vertical-align: bottom;
}
.legend div:nth-child(2) {
  width: 130px;
  font-size: 12px;
  margin-left: 5px;
  text-align: left;
}
.aperture {
  position: absolute;
  top: 38%;
  left: 50%;
  margin-left: -33%;
  width: 66%;
  height: 82px;
  background-image: url("../../../../assets/img/industry/aperture.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.aperture1 {
    position: absolute;
    top: 37%;
    left: 41%;
    margin-left: -33%;
    width: 85%;
    height: 82px;

}
.aperture2 {
   position: absolute;
       top: 30%;
    left: 49%;
    margin-left: -33%;
    width: 70%;
    height: 82px;

}
#workmanship,
#source,
#industryClassification,
#IndustrialOperation {
  z-index: 100;
}
/*
      top: 30%;
    left: 49%;
    margin-left: -33%;
    width: 70%;
    height: 82px;

px
;*/
</style>
